<template>
    <div class="artall">
        <van-sticky>
            <custNavbar title="文章" uname="search" paths="/search"></custNavbar>
            <div class="art-uls">
                <ul>
                    <li v-for="(item, index) in activeName" :key="index" @click="lis(item.cls)" :class="onlis == item.cls ? 'lis' : ''">{{ item.name }}</li>
                </ul>
            </div>
        </van-sticky>
        <div class="art-box" v-for="item in copydata" :key="item._id" @click="detail(item)">
            <div class="art-boxleft">
                <img src="@/assets/jl.png" alt="jl" class="img">
            </div>
            <div class="art-boxright">
                <p>{{ item.title.slice(0, 20)+'.....'}}</p>
                <ul>
                    <li>{{item.name}}</li>
                    <li><van-icon name="eye-o" />&nbsp;{{item.cnum}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
import custNavbar from '@/components/custNavbar/index.vue'
import { ref, onMounted } from 'vue';
import {getShowArtive} from '@/api/index.js'
import {useRouter} from 'vue-router';

const activeName = ref([
    { name: '精选好文', cls: 'a' },
    { name: '经验分享', cls: 'b' },
    { name: '技术精进', cls: 'c' },
    { name: '行业观察', cls: 'd' },
]);
const onlis = ref('a')
const tabledata = ref([])
const copydata=ref([])
const router=useRouter()
const lis = (dx) => {
    onlis.value = dx
    if (tabledata.value.length > 0) {
        const fid = tabledata.value.filter(item => item.cls === dx);
        copydata.value = fid;
    }
}

const detail=(item)=>{
    router.push({path:`/details/${item._id}`})
    // router.push({path:'/details',query:{id:item._id}});
}

const getlist=onMounted(async () => {
    const {artdata} = await getShowArtive()
    tabledata.value = artdata
    lis('a')
})
</script>

<style lang="scss" scoped>
.artall {
    .art-uls {
        background-color: #fff;

        ul {
            display: flex;
            justify-content: space-around;
            li {
                font-size: 14px;
                font-weight: bold;
                color: #CCCCCC;
            }

            .lis {
                color: #666EE8;
            }

            .lis::after {
                content: '';
                width: 70%;
                height: 2px;
                display: block;
                margin: 0 auto;
                border-bottom: 3px solid #666EE8;
                padding: 3px;
            }
        }
    }

    .art-box {
        padding: 15px 15px;
        display: flex;
        justify-content: space-between;

        .art-boxleft {
            width: 120px;
            height: 75px;
            background-color: #666EE8;
            text-align: center;
            line-height: 75px;
            border-radius: 10px;

            .img {
                width: 76px;
                height: 65px;
                align-items: center;
                vertical-align: middle;
            }
        }

        .art-boxright {
            width: 215px;
            height: 75px;
            border-radius: 10px;
            p{font-size: 14px;}
            ul{
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                position:relative;
                top: 25px;
                color: #999999;
            }
        }
    }
}
</style>

